<template>
  <a-tooltip :title="title" :color="color">
    <span ref="icon" @click="iconClick" :class="['iconfont', iconClass]"></span>
  </a-tooltip>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
interface IIconProps {
  iconClass: string,
  title: string,
  color?: string,
  dataType?: string
}
const props = withDefaults(defineProps<IIconProps>(), {
  color: '#2449FF'
})
const emit = defineEmits(['click'])
let icon = ref()
// 设置data-type属性
onMounted(() => {
  nextTick(() => {
    icon.value.setAttribute('data-type', props.dataType)
  })
})
const iconClick = (e) => {
  emit('click', e)
}
</script>

<style lang="less" scoped></style>
